<!--              @click="button.clickEvent"-->
<template>
  <div class="container">
    <div class="button-list">
      <button v-for="button in buttonList"
              :key="button.id"
              @click="handleButtonClick(button)"
              class="button"
              :class="{ 'highlighted': button === activeButton }">
        {{ button.name }}
      </button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      activeButton: null, // 存储当前高亮的按钮对象
      buttonList: []
    };
  },
  async created() {
    console.log('开始加载video-list工作面....')
    await this.getVideoList()
    // 默认选中并触发第一个按钮
    if (this.buttonList.length > 0) {
      this.activeButton = this.buttonList[0]
      console.log('this.buttonList[0] = ',this.buttonList[0])
      this.handleButtonClick(this.buttonList[0])
    }
  },
  methods: {
    // handleButtonClick1() {
    //   // 处理按钮1的点击事件
    // },
    handleButtonClick(button) {
    //   this.$emit('selectImage', button.url);
      this.$emit('selectVideo', button.url);
    //   this.$emit('selectImage2', button.image2);
      this.activeButton = button; // 设置当前高亮的按钮对象
    },
    async getVideoList() {
      try {
        // 获取图片数据
        const response = await axios.get('http://localhost:8080/videos/getAll')
        console.log('查询视频的response.data = ', response.data)
        if (response.code === '0') {
          this.buttonList = response.data
        } else {
          // 查询失败
          this.$message.success('查询视频失败')
        }
      } catch (error) {
        this.$message.success('查询视频失败')
      }
    }

  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 95%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.button-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto; /* 启用垂直滚动 */
  height: 100%; /* 占满容器高度 */
  width: 100%;
  padding: 10px 0; /* 添加上下内边距 */
  scrollbar-width: thin; /* Firefox滚动条样式 */
  scrollbar-color: #00BFFF #0f0756; /* Firefox滚动条颜色 */
}

/* 自定义滚动条样式 (Chrome/Safari) */
.button-list::-webkit-scrollbar {
  width: 8px;
}
.button-list::-webkit-scrollbar-track {
  background: #0f0756;
  border-radius: 4px;
}
.button-list::-webkit-scrollbar-thumb {
  background: #00BFFF;
  border-radius: 4px;
}

.button {
  height: 60px; /* 固定高度 */
  min-height: 60px; /* 防止被压缩 */
  margin: 5px 0; /* 垂直间距 */
  padding: 0 20px; /* 调整内边距 */
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 6px;
  width: 90%; /* 稍微缩窄便于显示滚动条 */
  max-width: 500px; /* 最大宽度限制 */
  color: transparent;
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border: 2px solid #0f0756;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* 防止按钮被压缩 */
  transition: all 0.3s ease;
}

.button:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.highlighted {
  background: linear-gradient(92deg, #0072FF 20%, #00EAFF 48.85%, #01AAFF 100%) !important;
  -webkit-text-fill-color: white !important;
  border-color: #00BFFF;
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.7);
}
</style>